<template>
    <section>
        <div class="cate-container">
            <div class="header flex-box flex-box-display">
                <h4>用户管理</h4>
            </div>
            <div class="cate-search flex-box">
                <el-row>
                    <el-col :span="7">
                        <el-select v-model="in_blacklist" placeholder="是否加入黑名单">
                            <el-option v-for="option in blacklist" :key="option.value"
                                       :label="option.text" :value="option.value">
                                {{ option.text }}
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-input v-model="usersName" placeholder="搜索微信昵称"></el-input>
                    </el-col>
                    <el-col :span="7">
                        <el-input v-model="openid" placeholder="搜索微信openid"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="searchItem">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="cate-con">
                <el-table ref="multipleTable" :data="usersList" style="width: 100%">
                    <el-table-column :resizable="false" label="id">
                        <template slot-scope="scope">
                            <span>{{scope.row.id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="昵称">
                        <template slot-scope="scope">
                            <span>{{scope.row.nickname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="头像">
                        <template slot-scope="scope">
                            <span>{{scope.row.avatar_url}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="性别">
                        <template slot-scope="scope">
                            <span>{{scope.row.sex === 1 ? '男' : '女'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="城市">
                        <template slot-scope="scope">
                            <span>{{scope.row.city}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="入口">
                        <template slot-scope="scope">
                            <span>{{scope.row.openid ? scope.row.openid :''}}</span>
                            <span>{{scope.row.xcx_openid ? scope.row.xcx_openid :''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="上级">
                        <template slot-scope="scope">
                            <span>{{scope.row.parent_id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.created_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" prop="operation" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="setup(scope.$index, scope.row.id)" type="text"
                                       size="small">设置
                            </el-button>
                            <el-button @click="editItem(scope.$index, scope.row.id)" type="text"
                                       size="small">修改
                            </el-button>
                            <el-button @click="seeOrder(scope.row.name, scope.row.id)" type="text" size="small">查看订单
                            </el-button>
                            <el-button @click="toGoodsCategory" type="text"
                                       size="small" icon="el-icon-edit-outline"></el-button>
                            <el-button @click="deleteItem(scope.$index, scope.row.id)" type="text"
                                       size="small" icon="el-icon-delete"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination" v-if="page.total">
                <div class="pagination-item">
                    <el-pagination layout="prev, pager, next" :total="page.total" :page-size="pageSize"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </section>
</template>

<script>

    export default {
        data() {
            return {
                usersList: [],
                in_blacklist: '',
                blacklist: [
                    {text: '是', value: '1'},
                    {text: '否', value: '0'}
                ],
                usersName: '',
                openid: '',
                page: {
                    total: null
                },
                pageSize: 20,
                showList: [],
                dialogVisible: false,
                currentRow: null
            }
        },
        watch: {},
        computed: {},
        mounted() {
            this.getUsersList();
        },
        methods: {
            searchItem() {
                console.log('黑名单', this.in_blacklist, '昵称', this.usersName, 'openid', this.openid)
                axios
                    .get('admin_users', {
                        params: {
                            in_blacklist: this.in_blacklist,
                            name: this.usersName,
                            openid: this.openid
                        }
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.usersList = res;
                        this.tableLoading = false;
                    })
            },
            getUsersList(pagination = 1) {
                axios
                    .get('admin_users', {
                        params: {
                            pagination,
                            pageSize: this.pageSize
                        }
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.usersList = res;
                        this.tableLoading = false;

                    })
            },
            deleteItem(index, id) {
                this.$confirm('是否确认删除该用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        return axios
                            .post(`admin_users/${id}`, {_method: 'DELETE'})
                            .then(
                                res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
                            );
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getGoodList()();
                    })
                    .catch(err => {
                        this.$message.error(err);
                    });
            },
            handleCurrentChange(current) {
                this.getUsersList(current);
            },
            setup(index, id) {
                this.$router.push({name: 'UsersConfig', query: {id: id}});
            },
            editItem(index, id) {
                this.$router.push({name: 'UsersEdit', query: {id: id}});
            },
            seeOrder(name, id) {
                this.$router.push({name: 'UsersOrder', query: {name: name, id: id}});
            },
            toGoodsCategory() {
                this.$router.push({name: 'CategoryList'});
            },
            handleClose() {
                this.dialogVisible = !this.dialogVisible;
            }
        }
    }
</script>
<style scoped>
    .cate-container {
        margin: 25px;
        border-radius: 4px;
        background: #fff;
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        border-bottom: 1px solid #d8d8d8;
    }

    .cate-search {
        padding: 10px 30px 0 30px;
    }

    .cate-con {
        min-height: 100vh;
        padding: 5px 20px 20px 20px;
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: space-around;

        width: 100%;
    }

    el-dialog {
        line-height: 40px;
    }
</style>